<template>
	<view>
		<view class="uni-padding-wrap">
			<view class="cu-list grid" :class="['col-' + gridCol,gridBorder?'':'no-border']">
				<view class="cu-item" v-for="(item,index) in cuIconList" :key="index" v-if="index<gridCol*2" @click="btnClick(index,item)">
					<view :class="['cuIcon-' + item.cuIcon,'text-' + item.color]">
						<view class="cu-tag badge" v-if="item.badge!=0">
							<block v-if="item.badge!=1">{{item.badge>99?'99+':item.badge}}</block>
						</view>
					</view>
					<text>{{item.name}}</text>
				</view>
			</view>
			<uni-section title="工单详情列表" type="line">
				<view v-for="(item ,index) in gdcrderlist" :index="index" :key="index">
					<uni-card v-if="item.gdzt == '1'" title="发布工单" :extra="item._add_time_str">
						<p>单号:<text class="uni-body">{{item.gdh}}</text></p>
						<p>项目:<text class="uni-body">{{item.bxxm}}</text></p>
						<p>位置:<text class="uni-body">{{item.bxld}}</text></p>
						<p>描述:<text class="uni-body">{{item.bxms}}</text></p>
						<p>姓名:<text class="uni-body">{{item.xm}}</text></p>
						<p>电话:<text class="uni-body">{{item.bxdh}}</text></p>
						<p v-if="jjbxdh" @click="MymakePhoneCall(jjbxdh)">紧急电话:<text class="uni-body">{{jjbxdh}}</text></p>
						<p v-if="item.imgs"><text class="uni-body">图片:</text></p>
						<view v-if="item.imgs" :key="indexz" class="imgstt" v-for="(img,indexz) in item.imgs">
							<image style="width: 100px;height: 100px; background-color: #eeeeee;" :src="img" ></image>
						</view>
						<fieldset v-if="item.sfobj" class="layui-elem-field layui-field-title">
						  <legend>维修师傅</legend>
						</fieldset>
						<p v-if="item.sfobj">师傅:<text class="uni-body">{{item.sfobj.xm}}</text></p>
						<p v-if="item.sfobj" @click="MymakePhoneCall(item.sfobj.dh)"><view class='cu-tag'>电话</view><text class="uni-body">{{item.sfobj.dh}}</text></p>
						<p v-if="item.sfobj" >处理时间:<uni-dateformat :date="item.sfobj.sj"></uni-dateformat></p>
					</uni-card>
					<uni-card v-if="item.gdzt == '2'" title="处理工单" :extra="item._add_time_str">
						<p>单号:<text class="uni-body">{{item.gdh}}</text></p>
						<p>项目:<text class="uni-body">{{item.bxxm}}</text></p>
						<p>位置:<text class="uni-body">{{item.bxld}}</text></p>
						<p>描述:<text class="uni-body">{{item.bxms}}</text></p>
						<p>姓名:<text class="uni-body">{{item.xm}}</text></p>
						<p>电话:<text class="uni-body">{{item.bxdh}}</text></p>
						<p v-if="jjbxdh" @click="MymakePhoneCall(jjbxdh)">紧急电话:<text class="uni-body">{{jjbxdh}}</text></p>
						<p v-if="item.imgs"><text class="uni-body">图片:</text></p>
						<view v-if="item.imgs" :key="index" class="imgstt" v-for="(img,index) in item.imgs">
							<image style="width: 100px;height: 100px; background-color: #eeeeee;" :src="img" ></image>
						</view>
						<fieldset v-if="item.sfobj" class="layui-elem-field layui-field-title">
						  <legend>维修师傅</legend>
						</fieldset>
						<p v-if="item.sfobj">师傅:<text class="uni-body">{{item.sfobj.name}}</text></p>
						<p v-if="item.sfobj" @click="MymakePhoneCall(item.sfobj.dh)"><view class='cu-tag'>电话</view><text class="uni-body">{{item.sfobj.dh}}</text></p>
						<p v-if="item.sfobj" >处理时间:<uni-dateformat :date="item.sfobj.sj"></uni-dateformat></p>
					</uni-card>
					<uni-card v-if="item.gdzt == '3'" title="待评价" :extra="item._add_time_str">
						<button @click="gopj(item)" type="primary">去评价</button>
						<p>单号:<text class="uni-body">{{item.gdh}}</text></p>
						<p>项目:<text class="uni-body">{{item.bxxm}}</text></p>
						<p>位置:<text class="uni-body">{{item.bxld}}</text></p>
						<p>描述:<text class="uni-body">{{item.bxms}}</text></p>
						<p>姓名:<text class="uni-body">{{item.xm}}</text></p>
						<p>电话:<text class="uni-body">{{item.bxdh}}</text></p>
						<p v-if="jjbxdh" @click="MymakePhoneCall(jjbxdh)">紧急电话:<text class="uni-body">{{jjbxdh}}</text></p>
						<p v-if="item.imgs"><text class="uni-body">图片:</text></p>
						<view v-if="item.imgs" :key="indext" class="imgstt" v-for="(img,indext) in item.imgs">
							<image style="width: 100px;height: 100px; background-color: #eeeeee;" :src="img" ></image>
						</view>
						<fieldset v-if="item.sfobj" class="layui-elem-field layui-field-title">
						  <legend>维修师傅</legend>
						</fieldset>
						<p v-if="item.sfobj">师傅:<text class="uni-body">{{item.sfobj.name}}</text></p>
						<p v-if="item.sfobj" @click="MymakePhoneCall(item.sfobj.dh)"><view class='cu-tag'>电话</view><text class="uni-body">{{item.sfobj.dh}}</text></p>
						<p v-if="item.sfobj" >处理时间:<uni-dateformat :date="item.sfobj.sj"></uni-dateformat></p>
						<fieldset v-if="item.wximg" class="layui-elem-field layui-field-title">
						  <legend>维修结果</legend>
						</fieldset>
						<view v-if="item.wximg" :key="indexs" class="imgstt" v-for="(img,indexs) in item.wximg">
							<image @click="imgyl(item.wximg,indexs)" style="width: 100px;height: 100px; background-color: #eeeeee;" :src="img" ></image>
						</view>
						<p v-if="item.wxbz">维修备注:<text class="uni-body">{{item.wxbz}}</text></p>
					</uni-card>
					<uni-card v-if="item.gdzt == '4'" title="完结工单" :extra="item._add_time_str">
						<p>单号:<text class="uni-body">{{item.gdh}}</text></p>
						<p>项目:<text class="uni-body">{{item.bxxm}}</text></p>
						<p>位置:<text class="uni-body">{{item.bxld}}</text></p>
						<p>描述:<text class="uni-body">{{item.bxms}}</text></p>
						<p>姓名:<text class="uni-body">{{item.xm}}</text></p>
						<p>电话:<text class="uni-body">{{item.bxdh}}</text></p>
						<p v-if="jjbxdh" @click="MymakePhoneCall(jjbxdh)">紧急电话:<text class="uni-body">{{jjbxdh}}</text></p>
						<p v-if="item.imgs"><text class="uni-body">图片:</text></p>
						<view v-if="item.imgs" :key="indexx" class="imgstt" v-for="(img,indexx) in item.imgs">
							<image @click="imgyl(item.imgs,indexx)" style="width: 100px;height: 100px; background-color: #eeeeee;" :src="img" ></image>
						</view>
						<fieldset v-if="item.sfobj" class="layui-elem-field layui-field-title">
						  <legend>维修师傅</legend>
						</fieldset>
						<p v-if="item.sfobj">师傅:<text class="uni-body">{{item.sfobj.name}}</text></p>
						<p v-if="item.sfobj" @click="MymakePhoneCall(item.sfobj.dh)"><view class='cu-tag'>电话</view><text class="uni-body">{{item.sfobj.dh}}</text></p>
						<p v-if="item.sfobj" >处理时间:<uni-dateformat :date="item.sfobj.sj"></uni-dateformat></p>
						<fieldset v-if="item.wximg" class="layui-elem-field layui-field-title">
						  <legend>维修结果</legend>
						</fieldset>
						<view v-if="item.wximg" :key="indexa" class="imgstt" v-for="(img,indexa) in item.wximg">
							<image @click="imgyl(item.wximg,indexa)" style="width: 100px;height: 100px; background-color: #eeeeee;" :src="img" ></image>
						</view>
						<p v-if="item.wxbz">维修备注:<text class="uni-body">{{item.wxbz}}</text></p>
					</uni-card>
				</view>
			</uni-section>
		</view>
	</view>
</template>


<script>
	var _this;
	var vk = uni.vk;
	import UniCard from "@/pages_bd/components/uni-card/uni-card";
	import uniDateformat from "@/pages_bd/components/uni-dateformat/uni-dateformat";
	export default {
		components: {UniCard,uniDateformat},
		data() {
			// 页面数据变量
			return {
				gridBorder: false,
				gridCol: 4,
				cuIconList: [{
					cuIcon: 'servicefill',
					color: 'red',
					badge: 0,
					name: '发布工单'
				},{
					cuIcon: 'repair',
					color: 'yellow',
					badge: 0,
					name: '处理工单'
				},{
					cuIcon: 'communityfill',
					color: 'cyan',
					badge: 0,
					name: '待评价'
				},{
					cuIcon: 'selection',
					color: 'olive',
					badge: 0,
					name: '完结工单'
				}
				],
				jjbxdh:'',
				userinfo:{},
				options:{},
				gdcrderlist:[],
				gdcrderlistbygdzt:[],
				gdlist: [{
						url: '/static/c1.png',
						text: '发布工单',
						badge: '0',
						type: "error"
					},
					{
						url: '/static/c2.png',
						text: '处理工单',
						badge: '0',
						type: "warning"
					},
					{
						url: '/static/c3.png',
						text: '待评价',
						badge: '0',
						type: "warning",
						type: "primary",
					},
					{
						url: '/static/c4.png',
						text: '完结工单',
						badge: '0',
						type: "success",
					}
				]
			}
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		async onLoad(options = {}) {
			_this = this;
			vk = uni.vk;
			this.options = options;
			this.init(options);
			this.userinfo.openid = vk.getVuex('$user.userInfo.wx_openid.mp-weixin');
			await this.getxybxgdlist(this.userinfo.openid,'1');
			await this.getvkGlobalData()
			//console.log(this.jjbxdh)
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady(){
			
		},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {
			
		},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {
			
		},
		// 监听 - 点击右上角转发时
		onShareAppMessage(options) {
			
		},
		// 函数
		methods: {
			btnClick(index,item){
				switch(index) {
				     case 0: this.getxybxgdlistbyGdzt('1');break;
				     case 1: this.getxybxgdlistbyGdzt('2');break;
					 case 2: this.getxybxgdlistbyGdzt('3');break;
					 case 3: this.getxybxgdlistbyGdzt('4');break;
					 default : break;
				} 
			},
			gopj(item){
				console.log(item)
				vk.navigateTo('/pages_bd/xybx/xybxpj?itemid='+item._id);
			},
			imgyl(listy,i){
				uni.previewImage({
					current:i,
					urls: listy,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + i) + '个按钮,第' + (data.index + i) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			getvkGlobalData(){return vk.callFunction({
				  url: 'client/gsxy/xybx/pub/xybxapi.getvkGlobalData',title:'请求中...',data:{}}).then((data) => {this.jjbxdh = data.info.value;}).catch((err) => {});
			},
			MymakePhoneCall(ipen){
				uni.makePhoneCall({
					phoneNumber: ipen 
				});
			},
			getxybxgdlistbyGdzt(gdzt){
				_this.gdcrderlist = []
				for (let i = 0; i < _this.gdcrderlistbygdzt.length; i++) {
					if(gdzt == _this.gdcrderlistbygdzt[i].gdzt){
						_this.gdcrderlist.push(_this.gdcrderlistbygdzt[i])
					}
				}
			},
			getxybxgdlist(openid,gdzt){
				// promise方式
				return vk.callFunction({
				  url: 'client/gsxy/xybx/pub/xybxapi.getxybxgdlist',
				  title:'请求中...',
				  data:{
				    openid:openid,
					gdzt:gdzt
				  }
				}).then((data) => {
				  //console.log(data)
					_this.cuIconList[0].badge = data.num1;
					_this.cuIconList[1].badge = data.num2;
					_this.cuIconList[2].badge = data.num3;
					_this.cuIconList[3].badge = data.num4;
				  _this.gdcrderlist = data.list
				  _this.gdcrderlistbygdzt = data.list
				}).catch((err) => {
				  console.log(err)
				});
			},
			// 页面数据初始化函数
			init(options){
				//vk.reLaunch("/pages_template/uni-id/index/index");
			},
			pageTo(path){
				vk.navigateTo(path);
			}
		},
		// 监听器
		watch:{
			
		},
		// 计算属性
		computed:{
			
		}
	}
</script>
<style lang="scss" scoped>
	.layui-elem-field {
		border-style: solid;
	}
	.layui-field-title {
		border-width: 1px 0 0;
	}
	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}
	
	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}
	.grid-dot {
		position: absolute;
		top: 5px;
		right: 1px;
	}
	.imgstt{
		padding: 6px;
		display: inline-grid;
		flex-wrap: wrap;
	}
</style>